<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="Steper Kuo">
	<title>Demo: preload images</title>

	<!-- Favicons -->
	<link rel="apple-touch-icon" sizes="152x152" href="https://gyx8899.github.io/YX-WebThemeKit/assets/img/apple-icon-152x152.png">
	<link rel="icon" type="image/png" sizes="16x16" href="https://gyx8899.github.io/YX-WebThemeKit/assets/img/favicon-16x16.png">

	<!-- Style custom *** CSS -->
	<style data-toggle="previewCode" data-target="#demoWrap" type="text/css">
		/* Demo's CSS here */
		#imageScene
		{
			width: 320px;
			height: 180px;
			margin: 0 auto;
		}
		#imageObj
		{
			width: 100%;
			height: 100%;
		}
		#progress
		{
			width: 200px;
			margin: 0 auto;
			display: block;
		}
		.prev-next
		{
			width: 250px;
			margin: 0 auto;
		}
		.prev-next > a
		{
			width: 120px;
			display: inline-block;
			text-align: center;
		}
	</style>

	<!--Jquery.js, HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<!--[if lt IE 9]>
	<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->

</head>
<body>
<!-- Script Preload code *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/fn-pre-loader/preLoader.js?type=split-ssc"></script>

<!-- Script Fundebug code *** JS -->
<script src="https://js.fundebug.cn/fundebug.0.3.6.min.js" apikey="f3b60739271056d85641a316cd13350f5960922b510427e3ec514bc3f0a74ac5"></script>

<main>

	<!-- Demos -->
	<section id="demos">
		<div class="row">
			<div id="demoWrap" class="large-12 columns">
				<div data-toggle="previewCode" data-target="#demoWrap">
					<!--Demo's html here-->
					<progress id="progress" value="0" max="100"></progress>
					<h3>PreLoad : Photo Album</h3>

					<div id="imageScene">
						<img id="imageObj" src="" alt="natural scenery">
					</div>
					<div class="prev-next">
						<a href="javascript: void(0);" title="Prev" class="btn" data-control="prev">prev</a>
						<a href="javascript: void(0);" title="Next" class="btn" data-control="next">next</a>
					</div>
				</div>
				<h3 id="overview">Overview</h3>
				<!--Introduction here-->
				<p>

				</p>
			</div>
		</div>
	</section>
</main>

<!-- Script Common *** JS -->
<script src="https://gyx8899.github.io/YX-JS-ToolKit/dist/assets/js/common.min.js"></script>

<!-- Script Config *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/assets/js/yx-theme-config.min.js"></script>

<!-- Script Demo *** JS -->
<script src="preload.js"></script>

<script data-toggle="previewCode" data-target="#demoWrap" type="text/javascript">
	// Demo's JS here
	var images = [
				'https://ss2.bdstatic.com/lfoZeXSm1A5BphGlnYG/skin/117.jpg'
				, 'https://ss2.bdstatic.com/kfoZeXSm1A5BphGlnYG/skin/825.jpg'
				, 'https://ss3.bdstatic.com/iPoZeXSm1A5BphGlnYG/skin/62.jpg'
				, 'https://ss2.bdstatic.com/lfoZeXSm1A5BphGlnYG/skin/5.jpg'
				, 'https://ss3.bdstatic.com/lPoZeXSm1A5BphGlnYG/skin/826.jpg'
				, 'https://ss0.bdstatic.com/k4oZeXSm1A5BphGlnYG/skin/823.jpg'
			],
			index = 0;
	$(document).ready(function () {
		//		Using 'ordered' plugin
		$.preload(images, {
			order: 'ordered',
			each: function (count) {
				$('#progress').attr('value', Math.round((count + 1) / length * 100));
			},
			all: function () {
				$('#progress').hide();
				updateImageSrc($('#imageObj'), images[index]);
			}
		});

		updateImageSrc($('#imageObj'), images[0]);
	});

	$('.btn').on('click', function () {
		if ('prev' === $(this).data('control'))
		{
			index = Math.max(0, --index);
			updateImageSrc($('#imageObj'), images[index]);
		}
		else
		{
			index = Math.min(images.length - 1, ++index);
			updateImageSrc($('#imageObj'), images[index]);
		}
	});

	function updateImageSrc($image, srcValue)
	{
		$image.attr('src', srcValue);
	}

	// Pre load images function
	function preLoadImages(imageArray)
	{
		var count = 0, length = imageArray.length;
		$.each(imageArray, function (i, src) {
			var image = new Image();
			$(image).on('load error', function () {
				count++;
				$('#progress').attr('value', Math.round(count / length * 100));
				if (count >= length - 1)
				{
					$('#progress').hide();
				}
			});
			image.src = src;
		})
	}
</script>

</body>
</html>